<template>
  <div>
    <van-nav-bar
      title="编辑"
      right-text="保存"
      left-arrow
      @click-left="() => router.go(-1)"
      @click-right="onSave"
    />

    <form-item>
      <template v-slot:content>
        <textarea class="content" placeholder="请输入" v-model="item.content"></textarea>
      </template>
    </form-item>

    <form-item @click="() => showDatePoput = true">
      <template v-slot:icon><van-icon name="clock-o" /></template>
      <template v-slot:content>{{dateFormat(item.stopTime)}}</template>
      <template v-slot:right><van-icon name="arrow" /></template>
    </form-item>

    <form-item @click="() => showStatusPopup = true">
      <template v-slot:icon><van-icon name="bulb-o" /></template>
      <template v-if="item.status >= 0" v-slot:content>{{mapStatus[item.status]}}待办</template>
      <template v-else v-slot:placeholder>紧急状态</template>
      <template v-slot:right><van-icon name="arrow" /></template>
    </form-item>

    <form-item>
      <template v-slot:icon><van-icon name="calendar-o" /></template>
      <template v-slot:content>设为每日待办</template>
      <template v-slot:right><van-switch v-model="item.daily" size="17px" @change="onDailyChange" /></template>
    </form-item>

    <div class="delete-btn" @click="onDelete">删除该待办</div>

    <van-popup v-model:show="showDatePoput" position="bottom" round>
      <van-datetime-picker
        type="datetime"
        title="选择截止时间"
        :min-date="minDate"
        :max-date="maxDate"
        @cancel="() => showDatePoput = false"
        @confirm="onDateConfirm"
      />
    </van-popup>

    <van-popup v-model:show="showStatusPopup" position="bottom" round>
      <van-picker
        title="紧急状态"
        :columns="statusColumns"
        @confirm="onStatusConfirm"
        @cancel="() => showStatusPopup = false"
      />
    </van-popup>
  </div>
</template>

<script>
import { NavBar, Icon, Switch, DatetimePicker, Popup, Picker, Toast, Dialog } from 'vant'
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex'
import { ref } from 'vue'
import formItem from '@/components/form/item'
import { dateFormat } from '../utils/common'
import { findIndex } from 'lodash'
export default {
  components: {
    [NavBar.name]: NavBar,
    formItem,
    [Icon.name]: Icon,
    [Switch.name]: Switch,
    [DatetimePicker.name]: DatetimePicker,
    [Popup.name]: Popup,
    [Picker.name]: Picker,
  },
  setup(){
    const router = useRouter()
    const route = useRoute()
    const store = useStore()

    const { key, createTime } = route.query
    const todoList = store.state.todoList
    let item = ref(todoList[findIndex(todoList, {key, createTime: parseInt(createTime)})])

    let showDatePoput = ref(false)
    let now = new Date()
    const onDateConfirm = val => {
      item.value.stopTime = new Date(val).getTime()
      showDatePoput.value = false
    }

    let showStatusPopup = ref(false)
    const onStatusConfirm = (val, idx) => {
      item.value.status = idx
      showStatusPopup.value = false
    }

    const onDailyChange = val => {
      item.value.daily = val
    }

    const onSave = () => {
      store.commit('editTodoItem', item.value)
      Toast.success('保存成功')
      router.go(-1)
    }

    const onDelete = () => {
      Dialog.confirm({
        title: '确认删除？',
        message: '删除后将无法恢复，请谨慎操作',
      }).then(() => {
        store.commit('removeTodoItem', {key, createTime})
        router.go(-1)
      })
    }
    return{
      router,
      onSave,
      item,
      minDate: now,
      maxDate: new Date(now.getTime() + 3600 * 24 * 365 * 1000),
      showDatePoput,
      onDateConfirm,
      dateFormat,
      showStatusPopup,
      statusColumns: store.state.mapStatus,
      onStatusConfirm,
      onDailyChange,
      onDelete,
      mapStatus: store.state.mapStatus
    }
  }
}
</script>

<style lang="less" scoped>
.content{
  width: 100%!important;
  height: auto;
  resize: none;
  border: 0;
  padding: 0;
  outline: 0;
  font-size: 1.1em;
}
.delete-btn{
  text-decoration: underline;
  color: #FF5353;
  text-align: center;
  margin: 1rem 0;
}
</style>